<template>
  <div class="ranking-card">
    <div class="card-header">
      <i class="ri-bar-chart-2-line"></i>
      <h3 class="title">排行榜</h3>
    </div>
    <div class="card-body">
      <div class="tabs">
        <button
          v-for="tab in tabs"
          :key="tab.key"
          class="tab-item"
          :class="{ active: activeTab === tab.key }"
          @click="activeTab = tab.key"
        >
          {{ tab.name }}
        </button>
      </div>
      <div class="tab-content">
        <Transition name="fade" mode="out-in">
          <ul class="ranking-list" :key="activeTab">
            <li v-for="(article, index) in activeList" :key="article.id" class="ranking-item">
              <span class="rank-badge" :class="`rank-${index + 1}`">{{ index + 1 }}</span>
              <a :href="`/article/${article.id}`" class="article-title" :title="article.title">{{
                article.title
              }}</a>
              <span class="metric-value">
                <i :class="tabs.find((t) => t.key === activeTab).icon"></i>
                {{ article[activeTab] }}
              </span>
            </li>
          </ul>
        </Transition>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  articles: {
    type: Array,
    required: true,
  },
})

const tabs = ref([
  { key: 'views', name: '阅读', icon: 'ri-eye-line' },
  { key: 'comments', name: '热评', icon: 'ri-chat-3-line' },
  { key: 'likes', name: '点赞', icon: 'ri-thumb-up-line' },
])

const activeTab = ref('views')

const top5 = (key) => {
  return [...props.articles].sort((a, b) => (b[key] || 0) - (a[key] || 0)).slice(0, 5)
}

const rankingLists = {
  comments: computed(() => top5('comments')),
  likes: computed(() => top5('likes')),
  views: computed(() => top5('views')),
}

const activeList = computed(() => {
  return rankingLists[activeTab.value].value
})
</script>

<style lang="scss" scoped>
.ranking-card {
  background: var(--bg-base);
  padding: 1.25em;
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-light);
  border: 1px solid var(--border-light);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: 1.25em;
  color: var(--text-primary);

  .ri-bar-chart-2-line {
    font-size: 1.4rem;
    color: var(--primary-color);
  }

  .title {
    font-size: var(--font-size-h4);
    font-weight: 600;
    margin: 0;
  }
}

.tabs {
  display: flex;
  background-color: var(--bg-light);
  border-radius: var(--radius-medium);
  padding: 0.3rem;
  margin-bottom: 1rem;
}

.tab-item {
  flex: 1;
  padding: 0.5rem;
  border: none;
  background: transparent;
  border-radius: var(--radius-small);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease-in-out;

  &.active {
    background-color: var(--bg-base);
    color: var(--primary-color);
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }
}

.ranking-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ranking-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 0.2rem;
  border-bottom: 1px solid var(--border-lighter);
  gap: 0.8rem;

  &:last-child {
    border-bottom: none;
  }
}

.rank-badge {
  display: inline-block;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  background-color: var(--bg-light);

  &.rank-1,
  &.rank-2,
  &.rank-3 {
    color: #fff;
  }
  &.rank-1 {
    background-color: #f44336;
  }
  &.rank-2 {
    background-color: #ff9800;
  }
  &.rank-3 {
    background-color: #ffc107;
  }
}

.article-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.9rem;
  color: var(--text-regular);
  text-decoration: none;
  transition: color 0.2s ease;

  &:hover {
    color: var(--primary-color);
  }
}

.metric-value {
  font-size: 0.85rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.3em;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
